<template>
  <div class="file-container">
    <div class="page-header">
      <h1>文件管理</h1>
      <div class="action-buttons">
        <button class="btn btn-primary" @click="handleNewFile">
          <span class="btn-icon">+</span> 新建文件
        </button>
        <button class="btn btn-secondary" @click="handleOpenFile">
          <span class="btn-icon">📂</span> 打开文件
        </button>
      </div>
    </div>

    <div class="file-explorer">
      <div class="file-sidebar">
        <div class="section-title">快速访问</div>
        <ul class="folder-list">
          <li class="folder-item" @click="selectFolder('documents')">
            <span class="folder-icon">📄</span> 文档
          </li>
          <li class="folder-item" @click="selectFolder('pictures')">
            <span class="folder-icon">🖼️</span> 图片
          </li>
          <li class="folder-item" @click="selectFolder('music')">
            <span class="folder-icon">🎵</span> 音乐
          </li>
          <li class="folder-item" @click="selectFolder('videos')">
            <span class="folder-icon">🎬</span> 视频
          </li>
          <li class="folder-item" @click="selectFolder('downloads')">
            <span class="folder-icon">⬇️</span> 下载
          </li>
        </ul>

        <div class="section-title">最近文件</div>
        <ul class="recent-list">
          <li
            v-for="(file, index) in recentFiles"
            :key="index"
            class="recent-item"
            @click="openRecentFile(file)"
          >
            <span class="file-icon">{{ getFileIcon(file.type) }}</span>
            <div class="file-info">
              <div class="file-name">{{ file.name }}</div>
              <div class="file-date">{{ file.date }}</div>
            </div>
          </li>
        </ul>
      </div>

      <div class="file-content">
        <div class="file-toolbar">
          <div class="search-box">
            <input
              type="text"
              placeholder="搜索文件..."
              v-model="searchQuery"
              @input="searchFiles"
            />
            <span class="search-icon">🔍</span>
          </div>
          <div class="view-options">
            <button
              class="view-btn"
              :class="{ active: viewMode === 'grid' }"
              @click="viewMode = 'grid'"
            >
              <span class="view-icon">▦</span>
            </button>
            <button
              class="view-btn"
              :class="{ active: viewMode === 'list' }"
              @click="viewMode = 'list'"
            >
              <span class="view-icon">☰</span>
            </button>
          </div>
        </div>

        <div class="files-container" :class="viewMode">
          <div v-if="files.length === 0" class="empty-state">
            <div class="empty-icon">📂</div>
            <h3>没有文件</h3>
            <p>选择一个文件夹或使用搜索功能查找文件</p>
          </div>

          <div v-else class="file-grid">
            <div
              v-for="(file, index) in files"
              :key="index"
              class="file-item"
              @click="selectFile(file)"
            >
              <div class="file-icon">{{ getFileIcon(file.type) }}</div>
              <div class="file-name">{{ file.name }}</div>
              <div class="file-size">{{ formatFileSize(file.size) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

// 视图模式：网格或列表
const viewMode = ref("grid");

// 搜索查询
const searchQuery = ref("");

// 当前选中的文件夹
const selectedFolder = ref("");

// 模拟文件数据
const files = reactive([]);

// 模拟最近文件数据
const recentFiles = reactive([
  {
    name: "项目计划.docx",
    type: "doc",
    date: "今天 14:30",
    path: "/documents/项目计划.docx",
  },
  {
    name: "财务报表.xlsx",
    type: "excel",
    date: "昨天 09:15",
    path: "/documents/财务报表.xlsx",
  },
  {
    name: "产品演示.mp4",
    type: "video",
    date: "2023-03-05",
    path: "/videos/产品演示.mp4",
  },
  {
    name: "会议记录.pdf",
    type: "pdf",
    date: "2023-03-01",
    path: "/documents/会议记录.pdf",
  },
  {
    name: "设计稿.psd",
    type: "image",
    date: "2023-02-28",
    path: "/pictures/设计稿.psd",
  },
]);

// 处理新建文件
const handleNewFile = () => {
  console.log("新建文件");
  // 这里可以调用Electron API来创建新文件
  window.electronAPI?.fileOperation?.({ action: "new" });
};

// 处理打开文件
const handleOpenFile = () => {
  console.log("打开文件");
  // 这里可以调用Electron API来打开文件对话框
  window.electronAPI?.fileOperation?.({ action: "open" });
};

// 选择文件夹
const selectFolder = (folder: string) => {
  console.log("选择文件夹:", folder);
  selectedFolder.value = folder;
  // 这里可以调用Electron API来获取文件夹内容
  window.electronAPI
    ?.fileOperation?.({ action: "listDir", path: folder })
    .then((result: any) => {
      // 处理返回的文件列表
      console.log("文件列表:", result);
    });
};

// 搜索文件
const searchFiles = () => {
  console.log("搜索文件:", searchQuery.value);
  // 这里可以调用Electron API来搜索文件
  if (searchQuery.value.trim()) {
    window.electronAPI
      ?.fileOperation?.({ action: "search", query: searchQuery.value })
      .then((result: any) => {
        // 处理搜索结果
        console.log("搜索结果:", result);
      });
  }
};

// 选择文件
const selectFile = (file: any) => {
  console.log("选择文件:", file);
  // 这里可以调用Electron API来打开文件
  window.electronAPI?.fileOperation?.({ action: "open", path: file.path });
};

// 打开最近文件
const openRecentFile = (file: any) => {
  console.log("打开最近文件:", file);
  // 这里可以调用Electron API来打开文件
  window.electronAPI?.fileOperation?.({ action: "open", path: file.path });
};

// 获取文件图标
const getFileIcon = (type: string): string => {
  switch (type) {
    case "doc":
      return "📝";
    case "excel":
      return "📊";
    case "pdf":
      return "📑";
    case "image":
      return "🖼️";
    case "video":
      return "🎬";
    case "audio":
      return "🎵";
    default:
      return "📄";
  }
};

// 格式化文件大小
const formatFileSize = (size: number): string => {
  if (size < 1024) {
    return `${size} B`;
  } else if (size < 1024 * 1024) {
    return `${(size / 1024).toFixed(2)} KB`;
  } else if (size < 1024 * 1024 * 1024) {
    return `${(size / (1024 * 1024)).toFixed(2)} MB`;
  } else {
    return `${(size / (1024 * 1024 * 1024)).toFixed(2)} GB`;
  }
};
</script>

<style lang="scss" scoped>
.file-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h1 {
    font-size: 1.8rem;
    margin: 0;
    color: var(--dark-color);
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  .btn-icon {
    margin-right: 8px;
  }

  &.btn-primary {
    background: var(--primary-gradient);
    color: white;

    &:hover {
      box-shadow: 0 4px 10px rgba(58, 123, 213, 0.3);
    }
  }

  &.btn-secondary {
    background: white;
    color: var(--dark-color);
    border: 1px solid #e1e5eb;

    &:hover {
      background: #f8f9fa;
    }
  }
}

.file-explorer {
  display: flex;
  flex: 1;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.file-sidebar {
  width: 240px;
  background: #f8f9fa;
  padding: 20px;
  border-right: 1px solid #e1e5eb;

  .section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-color);
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.folder-list,
.recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.folder-item,
.recent-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;

  &:hover {
    background: rgba(58, 123, 213, 0.05);
  }

  .folder-icon,
  .file-icon {
    margin-right: 10px;
    font-size: 1.2rem;
  }
}

.recent-item {
  .file-info {
    flex: 1;

    .file-name {
      font-size: 0.9rem;
      color: var(--dark-color);
    }

    .file-date {
      font-size: 0.7rem;
      color: var(--gray-color);
    }
  }
}

.file-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.file-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e1e5eb;
}

.search-box {
  position: relative;
  width: 300px;

  input {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border-radius: 20px;
    border: 1px solid #e1e5eb;
    font-size: 0.9rem;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
    }
  }

  .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-color);
    font-size: 0.9rem;
  }
}

.view-options {
  display: flex;

  .view-btn {
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--gray-color);
    font-size: 1.2rem;

    &.active {
      color: var(--primary-color);
    }
  }
}

.files-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;

  &.grid .file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
  }

  &.list .file-grid {
    display: flex;
    flex-direction: column;

    .file-item {
      flex-direction: row;
      justify-content: flex-start;
      padding: 10px 15px;

      .file-icon {
        margin-right: 15px;
        margin-bottom: 0;
      }

      .file-name {
        flex: 1;
        text-align: left;
      }

      .file-size {
        margin-left: 20px;
      }
    }
  }
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(58, 123, 213, 0.05);
  }

  .file-icon {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .file-name {
    font-size: 0.9rem;
    color: var(--dark-color);
    text-align: center;
    word-break: break-word;
  }

  .file-size {
    font-size: 0.7rem;
    color: var(--gray-color);
    margin-top: 5px;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gray-color);

  .empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
  }

  h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
  }

  p {
    font-size: 0.9rem;
    text-align: center;
  }
}
</style>
